<template>
	<view class="message-details">
		<view class="message-list">
			<view class="message-item" v-if="type == 1" v-for="(item,index) in noticeList" :key="index">
				<view class="time">{{item.add_time}}</view>
				<view class="message-info">
					<text class="title">{{item.title}}</text>
					<text class="content">{{item.content}}</text>
				</view>
			</view>

			<view class="goods-message-item" v-if="type == 2" v-for="(item,index) in noticeList" :key="index" @click="goGoodsDetails(item.type_id)">
				<view class="time">{{item.add_time}}</view>
				<view class="goods-message-info">
					<text class="title">{{item.title}}</text>
					<view class="image-text">
						<image :src="item.image" mode="aspectFill"></image>
						<text class="content">{{item.content}}</text>
					</view>
				</view>
			</view>

			<view class="goods-message-item" v-if="type == 3" v-for="(item,index) in noticeList" :key="index" @click="goGoodsDetails(item.type_id)">
				<view class="time">{{item.add_time}}</view>
				<view class="goods-message-info">
					<text class="title">厂家回复了您</text>
					<view class="image-text">
						<image :src="item.image" mode="aspectFill"></image>
						<text class="content">{{item.content}}</text>
					</view>
				</view>
			</view>

			<view class="goods-message-item" v-if="type == 4" v-for="(item,index) in noticeList" :key="index" @click="goActive(item.link)">
				<view class="time">{{item.add_time}}</view>
				<view class="active-message-info">
					<image :src="item.image" mode="aspectFill"></image>
					<view class="active-title">{{item.title}}</view>
					<view class="active-content">{{item.content}}</view>
				</view>
			</view>
			
			<view class="goods-message-item" v-if="type == 5" v-for="(item,index) in noticeList" :key="index" @click="goGoodsDetails(item.type_id)">
				<view class="time">{{item.add_time}}</view>
				<view class="remind-message-info">
					<image :src="item.image" mode="aspectFill"></image>
					<view class="remind-view">
						<view class="remind-title">{{item.nickname}}咨询:</view>
						<view class="remind-content">{{item.content}}</view>
					</view>
				</view>
			</view>

		</view>
		<pt-nothing text="暂无相关消息" :fixed="true" v-if="noData" icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
		</pt-nothing>

		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-if="showLoad" />
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noData: false,
				page: 0,
				type: '',
				noticeList: [],
				showLoad: false,
				more: false,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				}
			};
		},
		onLoad(options) {
			this.type = options.id
			this.init()
			this.setTitle()
		},
		methods: {
			setTitle() {
				let title = ['', '系统通知', '新品上新', '咨询回复', '活动通知','咨询提醒']
				uni.setNavigationBarTitle({
					title: title[this.type]
				});
			},
			init() {
				let data = {
					type: this.type,
					page: this.page
				}
				this.$u.apiWei.NoticeInfo(data).then(res => {
					res.datas.list.forEach((item) => {
						this.noticeList.push(item)
					})
					if (res.datas.list.length != 0) {
						this.more = true
					} else {
						this.more = false
					}
					if (this.noticeList.length == 0) this.noData = true
				})
			},
			goGoodsDetails(goods_id) {
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/product-info/product-info?goods_id=' + goods_id
				})
			},
			goActive(link){
				uni.navigateTo({
					animationDuration: 500,
					url: link
				})
			}
		},
		onReachBottom() {
			this.showLoad = true
			this.status = 'loading';
			setTimeout(() => {
				this.status = 'nomore';
			}, 1000)
			if (!this.more) return;
			this.page++;
			this.init()
		},
		onPullDownRefresh() {
			this.noticeList = []
			this.init()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F9F9F9;
	}

	.message-details {
		padding: 0 30rpx 20rpx 30rpx;

		.message-list {
			.time {
				padding-top: 50rpx;
				font-size: 22rpx;
				text-align: center;
				color: #757575;
				line-height: 54rpx;
			}

			.message-item {
				.message-info {
					margin-top: 46rpx;
					padding: 29rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					box-sizing: border-box;

					text {
						display: block;
					}

					.title {
						font-size: 32rpx;
						font-weight: bold;
						color: #28221F;
						line-height: 54rpx;
					}

					.content {
						font-size: 24rpx;
						color: #757575;
						line-height: 54rpx;

					}
				}
			}

			.goods-message-item {
				.title {
					display: block;
					font-size: 32rpx;
					font-weight: bold;
					color: #28221F;
					line-height: 54rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.goods-message-info {
					margin-top: 46rpx;
					padding: 29rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					box-sizing: border-box;

					.image-text {
						margin-top: 30rpx;
						display: flex;
						background: #F9F9F9;

						image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 4rpx;
						}

						.content {
							padding: 20rpx 50rpx 0 30rpx;
							display: -webkit-box;
							flex: 1;
							font-size: 24rpx;
							color: #757575;
							word-break: break-all;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}

				.active-message-info {
					margin-top: 46rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					box-sizing: border-box;
					overflow: hidden;
					image {
						width: 100%;
						height: 280rpx;
						border-radius: 4rpx;
					}
					.active-title{
						padding: 40rpx 0 30rpx 30rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #28221F;
						line-height: 54rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.active-content{
						padding: 0 16rpx 36rpx 30rpx;
						font-size: 28rpx;	
						color: #757575;
						height: 122rpx;
						line-height: 54rpx;
						display: -webkit-box;
						word-break: break-all;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				
				.remind-message-info{
					margin-top: 40rpx;
					padding: 38rpx 20rpx;
					display: flex;
					background: #FFFFFF;
					border-radius: 4rpx;
					image{
						display: block;
						width: 103rpx;
						height: 65rpx;
						border-radius: 4rpx;
					}
					.remind-view{
						margin-left: 48rpx;
						flex: 1;
						min-width: 0;
						.remind-title{
							font-size: 24rpx;
							color: #767676;
						}
						.remind-content{
							font-size: 28rpx;
							font-weight: bold;
							color: #141414;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
					
				}
				

			}

		}
	}
</style>
